<template>
  <uni-page-wrapper>
    <uni-page-body>
		  <uni-popup ref="popup1" type="dialog" >
			<uni-popup-dialog
			  type="info"
			  :title="popup1Title"
			  :before-close="true"
			  @close="close"
			  @confirm="confirm1"
			>
			  <!-- <input type="text" /> -->
			</uni-popup-dialog>
		  </uni-popup>
      <uni-view class="bg">
        <uni-view class="timeView">
          <view class="uni-list">
            <view class="uni-list-cell">
              <view class="uni-list-cell-db">
                <picker
                  @click="changePicker"
                  mode="date"
                  :value="startDateSearch"
                  :start="startDate"
                  :end="endDate"
                  @change="bindDateChange('startDateSearch', $event)"
                >
                  <view class="uni-input pick">{{ startDateSearch }}</view>
                </picker>
              </view>
            </view>
          </view>
          <uni-view class="label">to</uni-view>
          <view class="uni-list">
            <view class="uni-list-cell">
              <view class="uni-list-cell-db">
                <picker
                  @click="changePicker"
                  mode="date"
                  :value="endDateSearch"
                  :start="startDate"
                  :end="endDate"
                  @change="bindDateChange('endDateSearch', $event)"
                >
                  <view class="uni-input pick">{{ endDateSearch }}</view>
                </picker>
              </view>
            </view>
          </view>
          <uni-view class="search" @click="search">{{ $t("orders.search") }}</uni-view>
        </uni-view>
        <uni-view class="navs">
          <uni-view
            class="item"
            :class="isPending ? 'act' : ''"
            @click="pending"
            >{{ $t("orders.Pending") }}</uni-view
          >
          <uni-view
            class="item"
            :class="isPending ? '' : 'act'"
            @click="completed"
            >{{ $t("orders.Completed") }}</uni-view
          >
        </uni-view>
        <uni-scroll-view class="list">
          <div class="uni-scroll-view">
            <div class="uni-scroll-view" style="overflow: hidden auto">
              <div class="uni-scroll-view-content">
                <uni-view class="item" v-for="item in list" :key="item.id">
                  <uni-view class="msg">
                    {{ $t("orders.Creation time") }}：{{ item.time }}
                  </uni-view>
                  <uni-view class="msg">
                    {{ $t("orders.Order number") }}：{{ item.orid }}
                  </uni-view>
                  <uni-view class="commodity">
                    <image :src="item.image" class="icon"></image>
                    <uni-view class="right">
                      <uni-view class="tit">
                        {{ item.title }}
                      </uni-view>
                    </uni-view>
                  </uni-view>
                  <uni-view class="msg2">
                    <uni-view class="l"> {{ $t("orders.order amount") }} </uni-view>
                    <uni-view class="r">
                      {{ item.money }}
                    </uni-view>
                  </uni-view>
                  <uni-view class="msg2">
                    <uni-view class="l"> {{ $t("orders.commission") }} </uni-view>
                    <uni-view class="r">
                      {{ item.commission }}
                    </uni-view>
                  </uni-view>
                  <uni-view class="msg2">
                    <uni-view class="l"> {{ $t("orders.Expected return") }} </uni-view>
                    <uni-view class="r yellow">
                      {{ item.return }}
                    </uni-view>
                  </uni-view>
                  <uni-view
                    class="submit"
                    v-if="item.state == 1"
                    @click="pay(item.id)"
                  >
                    <uni-view class="btn"> {{ $t("orders.pay immediately") }} </uni-view>
                  </uni-view>
                </uni-view>
                <uni-view class="notMore">{{ $t("orders.No more data") }}</uni-view>
              </div>
            </div>
          </div>
        </uni-scroll-view>
      </uni-view>
    </uni-page-body>
  </uni-page-wrapper>
</template>

<script>
import service from "@/store/service.js";
import uniPopup from "../../components/uni-popup/uni-popup";
import uniPopupDialog from "../../components/uni-popup-dialog/uni-popup-dialog";
export default {
  components: { uniPopup, uniPopupDialog },
  data() {
    const currentDate = this.getDate({
      format: true,
    });
    const lastDate = this.getDate('last');
    return {
      startDateSearch: lastDate,
      endDateSearch: currentDate,
      popup1Title: this.$t("orders.Are you sure to submit now?"),
	  selectId:0,
      isPending: true,
      list: [],
	  issub:false
    };
  },
  computed: {
    startDate() {
      return this.getDate("start");
    },
    endDate() {
      return this.getDate("end");
    },
  },
  onShow() {
    this.search();
  },
  mounted() {
    this.changeToEng();
  },
  methods: {
    changeToEng() {
      const cancle = document.querySelectorAll(".uni-picker-action-cancel");
      const confirm = document.querySelectorAll(".uni-picker-action-confirm");
      cancle.forEach((element) => {
        element.innerText = this.$t("orders.cancle");
      });
      confirm.forEach((element) => {
        element.innerText = "ok";
      });
    },
    changePicker() {
      setTimeout(() => {
        const temp = document.querySelectorAll(".uni-picker-view-content");
        for (let i = 0; i < 3; ++i) {
          const children = temp[i].childNodes;
          children.forEach((item) => {
            item.innerHTML = item.innerHTML.substring(
              1,
              item.innerHTML.length - 2
            );
          });
        }
      }, 100);
    },
    getDate(type) {
		var nowDate = new Date().getTime(); // 本地时间距 1970 年 1 月 1 日午夜（GMT 时间）之间的毫秒数
		var offset_GMT = new Date().getTimezoneOffset();
      const date = new Date(nowDate + offset_GMT * 60 * 1000 + 5.5 * 60 * 60 * 1000);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
	  if (type === "last") {
	    day = day - 1;
	  }

      if (type === "start") {
        year = year - 60;
      } else if (type === "end") {
        year = year + 2;
      }
      month = month > 9 ? month : "0" + month;
      day = day > 9 ? day : "0" + day;
      return `${year}-${month}-${day}`;
    },
    bindDateChange(type, e) {
      this[type] = e.target.value;
    },
    pending() {
      this.isPending = true;
      this.search();
    },
    completed() {
      this.isPending = false;
      this.search();
    },
    confirm1(id) {
	  //调接口
		if(this.issub){
			return;
		}
		this.issub = true
      service.auth(
        this,
        service.api.app_settlement,
        {
          id: this.selectId,
        },
        function (self, res) {
			self.issub = false
			uni.showToast({
				title:self.$t("orders.success")
			})
			setTimeout(function(){
				self.$refs.popup1.close();
				self.search();
			},1000)
        }
      );
    },
	close(done){
		done();
	},
    pay(id) {
		this.selectId = id;
      this.$refs.popup1.open();
    },
    search() {
      //调用搜索的接口
      service.auth(
        this,
        service.api.app_mylist,
        {
          page: 1,
          limit: 1000000,
          state: this.isPending ? 1 : 0,
          start: this.startDateSearch,
          stop: this.endDateSearch,
        },
        function (self, res) {
          self.list = res.plus;
        }
      );
    },
  },
};
</script>

<style>
@import url(./orders.css);
</style>